import { User } from '@entity/user'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export class AvatarComponent extends Vue {

    /** 用户 */
    @Prop({
        default: () => new User()
    })
    private user: User;

    /** 用户名 */
    @Prop({
        default: ''
    })
    private name: string;

    /** 头像 */
    @Prop({
        default: ''
    })
    private avatar: string;

    /** 附加内容 */
    @Prop({
        default: ''
    })
    private msg: string;

    /** 头像大小 */
    @Prop({
        default: 30
    })
    private avatarSize: number;

    /** 字体大小 */
    @Prop({
        default: 18
    })
    private fontSize: number;

    @Prop({
        default: '0 10px'
    })
    /** 外边距 */
    private margin: string;

    /**
     * 如果父组件传了头像地址则直接使用, 否则去 user 里找
     */
    private get avatarAddress(): string {
        if (this.avatar.isEmpty()) {
            return this.user.avatar.imgUrl();
        } else {
            return this.avatar.imgUrl();
        }
    }

    /**
     * 生成头像样式
     */
    private get avatarStyle(): any {
        return {
            width: `${this.avatarSize}px`,
            height: `${this.avatarSize}px`,
            margin: this.margin
        };
    }

    /**
     * 如果父组件传了名字则直接使用, 否则去 user 里找
     */
    private get nameVisible(): string {
        if (this.name.isEmpty()) {
            return this.user.name;
        } else {
            return this.name;
        }
    }

    /**
     * 生成名字文字样式
     */
    private get nameStyle(): any {
        return {
            fontSize: `${this.fontSize}px`
        };
    }

}